<template>
	<view class="animated fadeIn faster">
			<view class="status-bar-height"></view>
			<view class="px-2 pt-3 pb-4">
				<view class="d-flex d-flex-center d-flex-middle mb-3">
					<text class="font32 color333">对话信息</text>
				</view>
				<view class="search-box d-flex d-flex-middle d-flex-between">
					<view class="d-flex d-flex-middle">
						<text class="iconfont icon-chazhao font-bold font34 mr-1" style="color:rgba(19, 20, 21, .5)"></text>
						<text style="color:rgba(19, 20, 21, .5)">请输入想要查询的关键词</text></view>
									<text class="font32 main-color">搜索</text>
								</view>
			</view>
			<view class="d-flex mb-2 px-2">
				<image class="kf-avatar mr-3" src="https://env-00jxtf9stgc0.normal.cloudstatic.cn/images/avatar/avatar07.png"></image>
				<view class="d-flex d-flex-column d-flex-between py">
					<view class="d-flex d-flex-middle">
						<text class="font32 font-500 mr-1">万域客服</text>
						<view class="d-flex d-flex-middle kf-formal"><text class="font20 colorfff">官方</text></view>
					</view>
					<text class="common-color">万域客服很高兴为您服务！</text>
				</view>
			</view>
			<view class="line-bar"></view>
			<view class="py-3">
				<view class="d-flex msg-li" v-for="item in conversationList" :key="item._id" @click="toChat(item.id)">
					<view class="avatar position-relative">
						<image class="rounded15" :src="item.avatar_file.url" mode="aspectFill" style="width: 138rpx;height: 138rpx;"></image>
						<view class="info-num d-flex d-flex-center d-flex-middle" v-if="item.unread_count>0">
							<text class="font22 colorfff">{{item.unread_count}}</text>
						</view>
					</view>
					<view class="d-flex d-flex-item d-flex-column py d-flex-between">
						<view class="d-flex d-flex-middle d-flex-between">
							<view class="d-flex d-flex-middle">
								<text class="msg-name font-500 font30">{{item.title}}</text>
								<text class="iconfont icon-yirenzheng mx-1 font26" style="color: rgb(255,192,51);"></text>
								<view class="border-main rounded5 px line-height30"><text class="font24">{{item.user_info.tags[0]}}</text></view>
							</view>
							<text class="common-color font24">{{friendlyTime(item.time)}}</text>
						</view>
						<view class="d-flex d-flex-middle">
							<text class="msg-company iconfont icon-gongsixinxi font24 mr-1"></text><text class="msg-company font24">{{item.user_info.comment}}</text>
						</view>
						<text class="msg-note font26">{{item.note}}</text>
					</view>
				</view>
			</view>
			<view class="d-flex d-flex-column d-flex-middle d-flex-center" style="padding-top: 160rpx;" v-if="isRedeay && conversationList.length == 0">
				<image src="https://env-00jxtf9stgc0.normal.cloudstatic.cn/images/no-msg.png" style="width: 244rpx;height: 160rpx;"></image>
				<view class="mt-4 mb-7"><text class="font24">抱歉，您还没有对话消息哦～</text></view>
				<view class="find-btn d-flex d-flex-middle d-flex-center"><text class="font-500 font32 colorfff">快去找商友吧～</text></view>
			</view>
	</view>
</template>

<script>
	import uniIm from '@/uni_modules/uni-im/sdk/index.js';
	export default {
		data() {
			return {
				isRedeay:false
			}
		},
		computed: {
			unreadMsgCount(){
				return uniIm.conversation.unreadCount()
			},
			conversationList() {
				const conversationList = uniIm.conversation.dataList
				return conversationList
			},
			friendlyTime:function() {
				return function(ctime){
					let timestamp = ctime + uniIm.heartbeat * 0
					let friendlyTime = uniIm.utils.toFriendlyTime(timestamp)
					let friendlyTimeArr = friendlyTime.split(' ')
					let friendlyTimeArrL = friendlyTimeArr.length
					if (friendlyTimeArrL == 3 && friendlyTime.includes('/')) {
						friendlyTime = friendlyTimeArr[0]
					}
					return friendlyTime
				}
			}
		},
		onShow() {
			this.$nextTick(()=>{
				uniIm.utils.setTabBarBadge(0, this.unreadMsgCount)
			})
		},
		watch: {
			unreadMsgCount: {
				handler(unreadMsgCount) {
					// #ifdef APP
					plus.runtime.setBadgeNumber(unreadMsgCount)
					// #endif
					uniIm.utils.setTabBarBadge(0, unreadMsgCount)
					// 调用扩展点，更新未读消息总数。
					uniIm.extensions.invokeExts('ui-update-unread-count', unreadMsgCount)
				},
				immediate: true,
			}
		},
		onLoad() {
			const {tokenExpired} = uniIm.currentUser
			if (tokenExpired < Date.now()) {
				uni.navigateTo({
					url:'/pages/login/login'
				})
				return
			}
			uniIm.onInitDataAfter(()=>{
			  // 执行当前页面初始化
			  this.init()
			})
		},
		methods: {
			async init(){
				if( this.conversationList.length < 30 ){
					await this.$nextTick()
					await this.loadMore()
				}
			},
			search(){
				uni.navigateTo({
					url:'/pages/search/search'
				})
			},
			async loadMore() {
			  let data = await uniIm.conversation.loadMore()
			  this.isRedeay = true
			  return data
			},
			goLogin(){
				uni.navigateTo({
					url:'/pages/login/login'
				})
			},
			toChat(cid){
				uni.navigateTo({
				  url: '/uni_modules/uni-im/pages/chat/chat?conversation_id=' + cid,
				  animationDuration: 300
				})
				// uni.navigateTo({
				//   url: '/pages/chat/chat?conversation_id=' + cid,
				//   animationDuration: 300
				// })
			}
		}
	}
</script>

<style scoped>
	.msg-li{
		border-bottom-width: 1px;
		border-bottom-style: solid;
		border-bottom-color: rgba(151, 151, 151, .1);
		padding: 0 20rpx 30rpx;
		margin-bottom: 30rpx;
	}
	.avatar{
		/* padding-top: 22rpx;
		padding-bottom: 22rpx;
		padding-left: 30rpx;
		padding-right: 25rpx; */
		padding-right: 30rpx;
	}
	.msg-name{
		color: #E88A53;
	}
	.msg-company{
		color: #E3AA5E;
	}
	.msg-note{
		color: rgba(26, 27, 28, .7);
	}
	.border-main{
		color: #FF5816;
	}
	.info-num{
		position:absolute;
		top: -10rpx;
		right: 10rpx;
		height: 38rpx;
		min-width: 38rpx;
		border-radius: 38rpx;
		background-color: #FD170C;
		z-index: 10;
	}
	.callinfo{
		height: 144rpx;
		padding-right: 30rpx;
		border-bottom: solid 1px #ececec;
	}
	.line-bar{
		background-color: rgba(151, 151, 151, .1);
		height: 16rpx;
	}
	.kf-avatar{
		width:96rpx;
		height: 96rpx;
		border:solid 1px #f0f0f0;
		border-radius: 12rpx;
	}
	.kf-formal{
		background: linear-gradient(#FF4900 0%, #FF9164 100%);
		border-radius: 4rpx;
		height: 30rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}
	.find-btn{
		width: 348rpx;
		height: 80rpx;
		background: #FF5816;
		border-radius: 50rpx;
	}
</style>